<template>
  <div class="fan-picker">
    <!-- 日期选择器 -->
    <DatePicker
      v-if="mode == 'DatePicker'"
      v-model="time"
      :format="dateFormat"
      :type="dateType"
      :placeholder="placeholder"
      :disabled="disabled"
      :options="options"
      style="width: 100%"
      @on-change="changeDatePicker"
      transfer
    ></DatePicker>
    <!-- 时间选择器 -->
    <TimePicker
      v-if="mode == 'TimePicker'"
      v-model="time"
      :format="timeFormat"
      :type="timeType"
      :placeholder="placeholder"
      :disabled="disabled"
      :options="options"
      style="width: 100%"
      @on-change="changeTimePicker"
      transfer
    ></TimePicker>
  </div>
</template>

<script>
export default {
  name: "fan-picker",
  props: {
    // 组件模式
    mode: {
      type: String,
      default: () => "DatePicker",
    },
    // 日期选择器模式
    dateType: {
      type: String,
      default: () => "date",
    },
    // 时间选择器模式
    timeType: {
      type: String,
      default: () => "time",
    },
    // 需要检验的字段名
    validateField: String,
    // 真正的参数值
    syncField: [String, Date, Array],
    // placeholder提示词
    placeholder: {
      type: String,
      default: () => "请选择时间",
    },
    // 日期显示格式化
    dateFormat: {
      type: String,
      default: () => "yyyy-MM-dd",
    },
    // 时间显示格式化
    timeFormat: {
      type: String,
      default: () => "HH:mm:ss",
    },
    // 是否禁用
    disabled: {
      type: Boolean,
      default: () => false,
    },
    // 选项属性
    options: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      time: null,
    };
  },
  watch: {
    syncField: {
      handler(nval) {
        if (nval) {
          this.time = nval;
        }
      },
      deep: true,
      immediate: true,
    },
  },
  mounted() {},

  methods: {
    // 选择日期
    changeDatePicker(val) {
      // 过滤掉为空的
      this.$emit(
        "update:syncField",
        val.filter((it) => it)
      );
      // 是否需要校验
      if (this.validateField) {
        // 找到form元素
        var form = this.$findParent(this, "fan-form");
        form.validateField(this.validateField);
      }
    },
    // 选择时间
    changeTimePicker(val) {
      this.$emit("update:syncField", val);
      // 是否需要校验
      if (this.validateField) {
        // 找到form元素
        var form = this.$findParent(this, "fan-form");
        form.validateField(this.validateField);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.fan-picker ::v-deep {
}
</style>
